<template>
    <div id="body-padding"  v-show="show">
        <div id="title">
            <img :src="'http://localhost:3000'+(data.data3.avatar?data.data3.avatar:'/img/avatar/mr.jpg')" alt="">
            <div>
                <p>{{data.data3.name}}</p>
                <p>{{time}} 加入</p>
            </div>
        </div> 
        <div id="geshi" v-if="(!data4.isMe)&&data4.isLogin">
            <p>
                <button v-show="!data4.info" @click="guClick(data.data3._id)">关注</button>
                <button v-show="data4.info" @click="quClick(data.data3._id)">已关注</button>
                <span class="fa fa-spin fa-spinner" v-show="spin"></span>
            </p>
            <p>
                <router-link to="">屏蔽</router-link>
                <router-link to="">举报</router-link>
            </p>
        </div>
        <p id="pss">{{data.data3.name}}的日记</p>
        <falsh v-show="show1">
            <span>今天没有日记。</span>
        </falsh>
        <div v-for="d1 in data.data1" class="day" v-if="d1.diaryID.open||data4.isMe">
            《{{d1.diaryID.name}}》{{d1.sj}} <br>
            <!--<pre>{{d1.content}}</pre>-->
            <div v-html='d1.content' id="content"></div>
            <img :src="'http://localhost:3000'+d1.img" alt="" v-if="d1.img">
            <div class="daya">
                <router-link :to="'/reply/'+d1._id">
                    <span class="fa fa-comments-o"></span>
                    <span v-show="d1.reply.length">{{d1.reply.length}}</span>
                    回复
                </router-link>
                <div v-if="data4.isMe">
                    <router-link :to="'/update/'+d1._id">编辑</router-link>
                    <a @click="delClick(d1._id)">删除</a>
                </div>
            </div>
            <span class="fa fa-lock a" v-if="!d1.diaryID.open" title="私密"></span>
        </div>            

        <p id="pss">{{data.data3.name}}的日记本</p>        
        <falsh v-show="show2">
            <span>你还没有日记本</span>
            <router-link to="/new/daily">马上创建一个吧</router-link>
        </falsh>
        <!-- :to="'/new/day/day/'+d2._id"  -->
        <router-link 
            to="" 
            v-for="(d2,i) in data.data2" 
            class="box" 
            key='i'>
            <img src="http://localhost:3000/img/diary/mr.jpg" alt="">
            <br>
            <span>{{d2.name}}</span>
        </router-link>
    </div>
</template>

<script>
import falsh from '../components/Falsh.vue'
export default {
    data:function(){
        return {
            show:false,
            show1:false,
            show2:false,
            time:"",
            data:{
                data3:{
                name:"",
                avatar:""
            }},
            data4:{},
            spin:false,
        }
    },
    components:{
        falsh,
    },
    methods:{
        look(){
            this.http.get('/diary/look',{params:{id:this.$route.params.id}})
            .then(res=>{
                // console.log(res.data.data);
                if(res.data.err==8){
                    this.layer.msg("请先登录");
                    return;
                }
                if(res.data.data.data1.length>0){
                    this.show1=false;
                }else{
                    this.show1=true;
                }
                if(res.data.data.data2.length>0){
                    this.show2=false;
                }else{
                    this.show2=true;
                }
                this.data = res.data.data;
                for(var i=0;i<this.data.data1.length; i++){
                    this.data.data1[i].content =  this.data.data1[i].content.replace(/\n/g,'<br>')
                }
                this.data4 = res.data.data.data4;
                this.time = res.data.data.data3.time.split(' ')[0];
                this.show = true;
            })
        },
        // 删除
        delClick(e){
            this.layer.confirm('确定删除吗？', {},()=>{
                this.layer.closeAll();
                // this.$store.dispatch("delLog",e);
                this.http.get("/reply/del",{params:{id:e}})
                .then(res=>{
                    if(!res.data.err){
                        this.look();
                    }
                })

            },function(){
                this.layer.closeAll();
            });
        },
        guClick(e){

            this.spin=true,
            setTimeout(()=> {
                this.http.get("/users/info",{params:{info:e}})
                .then(res=>{
                    this.spin=false;
                    this.look();
                    this.layer.msg(res.data.msg)
                })
            }, 1000);
            
        },
        quClick(e){
            this.spin=true,
            setTimeout(()=> {
               this.http.post("/users/info",{info:e})
                .then(res=>{
                    this.spin=false;
                    this.look();
                    this.layer.msg(res.data.msg)
                })
            }, 1000);
        },
    },
    // mounted:function(){
    //     this.look();
    //     this.$store.dispatch("word");
    // },
    activated(){
        this.look();
        this.$store.dispatch("word");
    }
}
</script>

<style scoped>
#day{
    padding: 2px 20px;
    background-color: white;
}
#title img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
#title{
    display: flex;
    margin: 20px 0;
}
#title p{
    margin: 0;
    font-size: 14px;
    padding-left: 10px;
    line-height: 25px;
}
#geshi{
    display: flex;
    justify-content: space-between;
    height: 50px;
}
#geshi button{
    height: 30px;
    border-radius: 4px;
    border: solid 1px #ccc;
}
#geshi p{
    margin: 0;
}
#pss{
    font-size: 18px;
}
.day{
    border-bottom: solid 1px #ccc;
    padding: 8px 2px;
    position: relative;
}
.a{
    position: absolute;
    top: 5px;
    right: 18px;
    color: #999;
}
.day img{
    max-width: 100%;
}
.daya{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 8px 0;
}
.box{
    display: inline-block;
    text-align: center;
    width: 160px;
    margin: 1px;
}
.box img{
    max-width: 160px;
    height: 120px;
}
#content{
    width: 80vw;
}
</style>